<template>
	<view class="goodsCate">
		<navbar>产品分类</navbar>
		<view class="content">
			<view class="content-header acea-row row-center-wrapper" :style='"top: "+navH+"rpx;"'>
				<u-search placeholder="点击搜索商品信息" :show-action="false" v-model="keyword" class="search" @search="goSearch" @clear="searchClear"></u-search>
			</view>
			<view class="aside" :style='"top: "+navH+"rpx;"'>
				<view @click="setScroll(item.id)" :class="'item acea-row row-center-wrapper ' + ((item.scrollh<=scrollTop)&&(category[index+1]?(scrollTop<category[index+1].scrollh):true)?'act':'')" v-for="(item,index) in category" :key="index">
					<text>{{item.cate_name}}</text>
				</view>
			</view>
			<view class="container">
				<scroll-view scroll-y="true" :scroll-into-view="scrollIntoView" style="height: 100vh" @scroll="scroll" scroll-with-animation>
					<view class="listw" v-for="(item,index) in category" :key="index" :id="'item'+item.id">
						<view class="title acea-row row-center-wrapper">
							<view class="line"></view>
							<view class="name">{{item.cate_name}}</view>
							<view class="line"></view>
						</view>
						<u-grid :col="3" :border="false" class="list">
							<u-grid-item v-for="(citem,cindex) in item.children" :key="cindex">
								<navigator :url="'/pages/goods_list/goods_list?sid='+citem.id+'&cid='+item.id" class="item acea-row row-column row-middle">
									<view class="pic">
										<image :src="citem.pic" mode=""></image>
									</view>
									<view class="text line1">{{citem.cate_name}}</view>
								</navigator>
							</u-grid-item>
						</u-grid>
					</view>
					<view :style="'height: calc(100vh - '+endH+'px);'"></view>
				</scroll-view>
			</view>
		</view>
		<!-- 进度条开始 -->
		<line-progress></line-progress>
		<!-- 进度条结束 -->
	</view>
</template>

<script>
	const app = getApp();
	import api from "@/api/api.js";
	export default {
		data() {
			return {
				category:[],
				navH: app.globalData.navHeight,
				citemH:118, // px为单位，每一行基础高度
				cheaderH:45, // 标题高度
				paddingTopH:10,
				scrollIntoView:"",
				time:300, // 防止多次点击造成的setScroll bug
				ifSet:true,
				endH:0,
				keyword:"",
				scrollTop:0
			}
		},
		onLoad() {
			this.getCateData()
		},
		methods: {
			getCateData:function(){
				const that = this;
				let citemH = this.citemH;
				let cheaderH = this.cheaderH;
				let paddingTopH = this.paddingTopH;
				api.index.getCate().then(e=>{
					console.log(e)
					let category = e.category;
					if(category.data.status == 200){
						let d = category.data.data;
						let h = 0;
						for(let o of d.keys()){
							if(o == 0){
								d[o].scrollh = 0
							}else{
								let k = d[o-1].children.length
								let j = k%3 == 0?k/3:Math.floor(k)+1;
								// console.log(o,j,citemH*j,cheaderH,h,citemH*j + cheaderH + h + paddingTopH)
								d[o].scrollh = citemH*j + cheaderH + h + paddingTopH;
							}
							h = d[o].scrollh;
							let g = d[o].children.length;
							let f = g%3 == 0?g/3:Math.floor(g)+1;
							d[o].selfh = citemH*f + cheaderH + paddingTopH;
						}
						that.category = d;
						that.endH = parseInt(d[d.length-1].selfh) - parseInt(50);
					}
				})
			},
			setScroll:function(id){
				const that = this;
				if(this.ifSet){
					let category = this.category;
					let obj = category.find(function(o){
						return o.id == id
					})
					let item_id = "item" + id;
					this.scrollIntoView = item_id;
					this.scrollTop = obj.scrollh;
					this.ifSet = false;
					setTimeout(function(){
						that.ifSet = true
					},that.time)
				}
			},
			scroll:function(event){
				// console.log(event.detail.scrollTop)
				this.scrollTop = event.detail.scrollTop
			},
			goSearch:function(e){
				console.log(e)
				if(e!=""){
					uni.navigateTo({
						url:"/pages/goods_list/goods_list?keyword=" + e
					})
				}else{
					uni.showToast({
						icon:"none",
						title:"关键词不能为空",
						duration:800
					})
				}
			},
			searchClear:function(){
				this.keyword = ""
			}
		}
	}
</script>

<style>
	page{
		overflow: hidden;
	}
	.content-header {
		width: 100%;
		height: 96rpx;
		background-color: #fff;
		position: fixed;
		left: 0;
		right: 0;
		z-index: 9;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.content-header .search {
		width: 90%;
		height: 60rpx;
		background-color: #f5f5f5;
		border-radius: 50rpx;
		box-sizing: border-box;
	}

	.aside {
		position: fixed;
		width: 180rpx;
		left: 0;
		bottom: 0;
		background-color: #f7f7f7;
		overflow-y: auto;
		overflow-x: hidden;
		margin-top: 98rpx;
	}

	.aside .item {
		height: 80rpx;
		width: 100%;
		font-size: 26rpx;
		color: #424242;
	}

	.aside .item.act {
		background-color: #fff;
		border-left: 4rpx solid #fc4141;
		width: 100%;
		text-align: center;
		color: #fc4141;
		font-weight: bold;
	}

	.container {
		margin: 98rpx 0 0 180rpx;
		padding: 0 14rpx;
	}

	.container .listw {
		padding-top: 20rpx;
		vertical-align: top;
	}

	.container .listw .title {
		height: 90rpx;
	}

	.container .listw .title .name {
		font-size: 28rpx;
		color: #333;
		margin: 0 30rpx;
		font-weight: bold;
	}

	.container .listw .title .line {
		width: 100rpx;
		height: 2rpx;
		background-color: #999;
	}

	.container .listw .list .item {
		width: 177rpx;
	}

	.container .listw .list .item .pic {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
	}

	.container .listw .list .item .text {
		font-size: 24rpx;
		color: #333;
		height: 56rpx;
		line-height: 56rpx;
		width: 120rpx;
		text-align: center;
	}
</style>
